---
title: Next.js App Router
description: Explore examples of how to use Vercel AI SDK in Next.js App Router Application.
---

# Examples for Next.js App Router

The Vercel AI SDK is designed to work with Next.js App Router. Since the App Router has first class support for React Server Components, you can use the `ai/rsc` module to build applications with features like [Generative User Interfaces](/docs/ai-sdk-rsc) and better [Server-Client State Management](/docs/ai-sdk-rsc/generative-ui-state).

As a result, the examples will demonstrate querying the language model and streaming the response to the client using React Server Components and Server Actions from `ai/rsc`, instead of using Route Handlers and hooks such as `useChat` and `useCompletion` from `@ai-sdk/react`.

## Next.js Compatibility

| Framework            | ai/rsc   | ai/core  | @ai-sdk/react |
| -------------------- | -------- | -------- | ------------- |
| Next.js App Router   | <Check/> | <Check/> | <Check/>      |
| Next.js Pages Router | <Cross/> | <Check/> | <Check/>      |

> **Note:** It is still possible to query the language model with Route Handlers and manage the response using hooks in the App Router, but it is recommended to use React Server Components for better performance and developer experience.
